<template>
    <div id="app" v-cloak>
        <loading></loading>
        <layout-header v-if="$route.meta.istrun"></layout-header>
        <layout-body></layout-body>
        <layout-footer></layout-footer>
		<div class="player">
		<!-- <Player></Player> -->
		</div>
    </div>
</template>
<script>
    import layoutHeader from '@/components/layout/layout-header'
    import layoutBody from '@/components/layout/layout-body'
    import layoutFooter from '@/components/layout/layout-footer'
    import Loading from '@/components/loading'
	import Player from 'zw-player'
	import {add} from '@/api/visitor.js'
    export default {
        name: "app",
        components: {
            layoutHeader,
            layoutBody,
            layoutFooter,
            Loading,
			Player
        },
		methods:{
			resize(){
				var that = this;
				var w = document.body.clientWidth;
				if(w <= 1024){
					that.$store.commit("setXuMeiJuan",true)
				}else{
					that.$store.commit("setXuMeiJuan",false)
				}
				(function() {
					window.onresize = () => {
						return (() => {
							w = document.body.clientWidth;
							if(w <= 1024){
								that.$store.commit("setXuMeiJuan",true)
							}else{
								that.$store.commit("setXuMeiJuan",false)
							}
						})()
					}
				})()
			}
		},
		mounted() {
			//添加访客足迹
			if(this.userInfo){
				var data = {
					userId: this.userInfo.id,
					userName: this.userInfo.username,
					userImage: this.userInfo.headphoto
				}
				add(data);
			}
			// 项目启动时，加载自适应配置
			this.resize();
		},
		computed:{
			userInfo(){
				return this.$store.state.userInfo
			}
		}
    }
</script>
<style lang="less">
    #app {
        font-size: 17px;
        color: #6f6f6f;
		/* background-color: #f5f5f5; */
    }
	#app #layout-header{
		/* background-color: #f5f5f5; */
	}
	.player{
		position: fixed;
		top: 0;
		left: 0;
		padding: 10px;
		z-index: 10000;
	}
	.player .list_title{
		z-index: 100;
	}
	.player .list_close{
		top: 10px !important;
	}
	.player .list_title{
		padding-top: 20px;
	}
	.player .music_search_box{
		left: 150px !important;
		top: 20px;
		z-index: 0;
	}
	.player .music_alert{
		z-index: 300;
	}
	.el-pagination{
		white-space: normal !important;
	}
</style>
<!-- 手机适配 -->
<style lang="less">
	@media screen and (max-width: 1024px) {
		.el-message{
			min-width: 90% !important;
			font-size: 12px !important;
			.el-message__content{
			font-size: 12px !important;
			}
		}
		.el-message-box{
			width: auto !important;
			.el-message-box__title{
				font-size: 14px !important;
			}
			.el-message-box__message{
				font-size: 12px !important;
			}
			.el-message-box__btns{
				text-align: center;
				button{
					font-size: 12px;
					padding: 5px;
				}
			}
		}
		#layout-footer{
			/* display: none; */
			.footer-main{
				margin-bottom: 0 !important;
			}
		}
		#layout-header{
			height: 45px !important;
		}
	}
</style>
